﻿@using Store.Models.Database
<!-- InstanceBeginEditable name="MainBody" -->
<link rel="stylesheet" type="text/css" href="/css/household.css" />
<link rel="stylesheet" type="text/css" href="/css/goods-item.css" />
<div class="phone-market">
    <div class="banner">
        <div class="xgs-row">
            <img src="/img/household/banner.png" width="100%" height="300">
        </div>
    </div>
</div>
<!--  -->
<div class="household-container  goods-item">
    <div class="xgs-row" style="padding: 0;background-color: white;">
        <ul class="household-navtab" style="display: inline-block;">
            @*
                cshtml cs(csharp) c#  + html
                1、@语句/变量
                2、@{}  应用于多行C#编写
            *@
            @*3、接收数据*@
            @{
                //             参数的名字Cates跟传过来的是一致是的
                //           把动态类型转换成 对象类型  分类列表
                var cates = ViewData["Cates"] as List<Category>;
                //循环遍历一个列表
                foreach (var item in cates)
                {
                    @*      每一次循环遍历输出一行li的html代码 并把分类名称输出 @item.CateName *@
                    if (item.Id == (int)ViewData["CateId"])
                    {
                        <li><a style="background-color: #69c0ff;color: white;" href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                    }
                    else
                    {
                        <li><a href="/market.html?cateId=@item.Id">@item.CateName</a></li>
                    }
                }
            }
            @*<li><a href="javascript:void(0);">文学</a></li>
                <li><a href="javascript:void(0);">社科</a></li>
                <li><a href="javascript:void(0);">经管</a></li>
                <li><a href="javascript:void(0);">少儿</a></li>
                <li><a href="javascript:void(0);">文教</a></li>
                <li><a href="javascript:void(0);">科技</a></li>
                <li><a href="javascript:void(0);">艺术</a></li>*@
        </ul>
    </div>

    <div class="tab-item white-panel" style="padding: 20px 0;margin-top: 20px;">
        <!-- 文学 -->
        <div id="wenxue" class="wenxue">
            @*循环 11次 每次 *@
            @{
                // * * * *
                // * * * *
                // * * * *
                // * * * *
                var goods = ViewData["Goods"] as List<Good>;
                //循环的次数 商品总数/4 + 1
                var row = goods.Count / 4 + 1;
                for (int i = 1; i <= row; i++)
                {
                    //循环行数
                    <div class="xgs-row">
                        @*
                            分页 跳过Skip N个 取Take N个
                            1 2 3 4  1
                            5 6 7 8  2
                            .。。。   3
                            41
                        *@
                        @{
                            //
                            //一行4个商品
                            var list = goods.Skip((i - 1) * 4).Take(4).ToList();
                            foreach (var item in list)
                            {
                                //把每个商品的html标签循环 同时把显示字段替换
                                <div class="xgs-col4">
                                    <a href="detail.html?id=@item.Id">
                                        <div>
                                            <img src="@item.Cover" alt="">
                                            <span class="goods-title">
                                                @item.Name
                                            </span>
                                            <p class="price">￥@item.Price</p>
                                        </div>
                                    </a>
                                </div>
                            }
                        }
                    </div>
                }
            }
        </div>
    </div>
    <!-- InstanceEndEditable -->
